<template>
  <div class="ee">
    <a-form :form="form">
      <a-form-item label="补货时间" :label-col="{ span: 3}">{{ this.$store.state.replenishmentTime }}</a-form-item>
      <a-form-item label="待补货设备" :label-col="{ span: 3}">{{ this.$store.state.devCode }}</a-form-item>
      <a-form-item label="待补货设备地址" :label-col="{ span: 3}">{{ this.$store.state.posAddr }}</a-form-item>
      <a-form-item label="巡柜员" :label-col="{ span: 3}">{{ this.$store.state.employeeName }}</a-form-item>
      <a-form-item label="待补货清单" :label-col="{ span: 3}" :wrapper-col="{ span: 25}">
        <a-table
          class="tb"
          :rowKey="record => record.goodsName"
          :columns="columns"
          :dataSource="data"
          :bordered="true"
        >
          <template slot="number" slot-scope="text,record,index" href="javascript:;">{{index+1}}</template>
        </a-table>
      </a-form-item>
      <a-form-item label="待下架清单" :label-col="{ span: 3}" :wrapper-col="{ span: 25}">
        <a-table
          class="tb"
          :columns="columnss"
          :dataSource="dataA"
          :bordered="true"
          :rowKey="record => record.goodsName"
        >
          <template slot="number" slot-scope="text,record,index" href="javascript:;">{{index+1}}</template>
        </a-table>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
const columns = [
  {
    //dataindex是用来渲染数据的
    dataIndex: "number",
    title: "序号",
    align: "center",
    scopedSlots: { customRender: "number" }
  },
  {
    dataIndex: "goodsName",
    title: "商品名称",

    align: "center"
  },
  {
    dataIndex: "sales",
    title: "已售",

    align: "center"
  },
  {
    dataIndex: "stock",
    title: "库存",

    align: "center"
  },
  {
    dataIndex: "standardStock",
    title: "标准库存",

    align: "center"
  },
  {
    dataIndex: "replenishNumber",
    title: "待补货",

    align: "center"
  },
  {
    dataIndex: "planQuantity",
    title: "实际需补货",

    align: "center"
  }
];
//待下货清单
const columnss = [
  {
    dataIndex: "number",
    title: "序号",
    align: "center",
    scopedSlots: { customRender: "number" }
  },
  {
    dataIndex: "goodsName",
    title: "商品名称",
    align: "center"
  },
  {
    dataIndex: "sales",
    title: "已售",
    align: "center"
  },
  {
    dataIndex: "standardStock",
    title: "标准库存",
    align: "center"
  },
  {
    dataIndex: "stock",
    title: "待下架",
    align: "center"
  }
];
const dataA = [
  {
    key: "1"
  }
];
//  const data = [{
//   key: '1',
//  }]

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i.toString(),
    name: `${i}`
    // age: 32,
    // address: `London Park no. ${i}`,
  });
}
export default {
  data() {
    return {
      expand: false,
      form: this.$form.createForm(this),
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      data: [],
      dataA: [],
      columns,
      columnss
    };
  },
  methods: {
    handleTablePop(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      //必须要查询
      this.search();
    },
    //补货单详情的数据
    detailbuhuo() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/replenishmentOrder/detailReplenishmentList", {
          loginToken: this.$store.state.loginToken,
          deviceAgentId: this.$store.state.deviceAgentId,
          replenishmentOrderId: this.$store.state.replenishmentOrderId
        })
        .then(response => {
          console.log(this.data);
          //待补货清单
          this.data = response.data.data.replenishmentList;
          // this.data=response.data.data.list[0]
          //待下货清单
          this.dataA = response.data.data.inboundList;
        });
    }
  },
  created() {
    this.detailbuhuo();
  }
};
</script>

<style>
.ee {
  width: 100%;
  padding-left: 40px;
}
.tb {
  /* margin-left: 160px;
    padding-top: -60px; */
  /* margin-top: -60px; */
  margin-left: 90px;
  /* float: left */
}
</style>
